<script setup lang="ts">

</script>

<template>
<div class="wrap">
  <h3>当自动放置网格项目算法试图将所有网格项目放在一个网格系统内时，发生的第一件事就是创建“匿名网格项目”。在网格系统中，网格容器内的文本节点，被称为匿名网格项目。比如代码中“我是一个文本节点（textNode）”是网格容器 .container 直接内容，所以这行文本也是网格容器中的一个网格项目（即匿名网格项目）。</h3>
  <p>网格容器的伪元素 ::before ::after 生成的内容也被称为网格项目，但是他们不是 匿名网格项目</p>
  <p>css 中是没有相关的选择器可以选中网格容器中的“文本节点”的，因此，你也无法使用网格相关的属性来明确放置“匿名网格项目“，换句话说，网格中的”匿名网格项目“的位置，是按照网格系统中自动放置的算法来指定位置的</p>
  <section>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      我是一个文本节点(TextNode)
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </section>
</div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;

  section {
    .container {
      --width: 100%;

      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(4, 1fr);

      width: var(--width);
      padding: 1rem;
      outline: 1px dashed #f36;
      counter-reset: item;
      font-family: "Bungee Shade", cursive;
      font-size: 1rem;
      text-shadow: 1px 1px rgb(0 0 0 / 0.5);

      &:before, &:after {
        content: '';
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #bbd7af;
        color: #000;
        background-image: repeating-conic-gradient(
                from 7.5deg at 50% 0,
                transparent 0 15deg,
                #09f336 0 30deg
        ),
        linear-gradient(177deg, #f196f312, #f4433609);
        mix-blend-mode: overlay;
        background-blend-mode: screen;
        box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
        text-shadow: 1px 1px 0 rgb(255 255 255), -1px -1px 0 rgb(255 255 255);
        font-family: "Bungee Shade", cursive;
        font-size: 2rem;
      }
      &:before {
        content: 'Before';
      }

      &:after {
        content: 'After';
      }

      ::v-deep(.item){
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #2c6;
        color: #000;
        position: relative;

        &:before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }

        &:nth-child(1) {
          background-color: #bbd7af;
        }
        &:nth-child(2) {
          background-color: #dac2f1;
        }
        &:nth-child(3) {
          background-color: #ccf1c2;
        }
        &:nth-child(4) {
          background-color: #c2e9f1;
        }
        &:nth-child(5) {
          background-color: #9f10ae;
        }
        &:nth-child(6) {
          background-color: #f44336;
        }
        &:nth-child(7) {
          background-color: #2196f3;
        }
        &:nth-child(8) {
          background-color: #f196f3;
        }


      }
    }
  }
}
</style>
